<template>
	<view class="container">
		<!-- 顶部 tabs -->
		<!-- <view class="" style="height: 5vh;background-color: #fff;"> </view> -->
		<!-- 搜索框 -->
		<view class="search-box">
			<input class="search-input" placeholder="请输入关键字" v-model="keyword" />
			<button class="search-btn">搜索</button>
		</view>

		<!-- 分类筛选 -->
		<view class="filters">
			<text :class="{ selected: filter === '全部' }" @click="filter = '全部'">全部</text>
			<text :class="{ selected: filter === '时盘' }" @click="filter = '时盘'">时盘</text>
			<text :class="{ selected: filter === '山向盘' }" @click="filter = '山向盘'">山向盘</text>
		</view>

		<!-- 列表项 -->
		<view class="record-card" v-for="(item, index) in AIContentInfoData" :key="index" @click="arrangement(item)">
			<!-- 顶部行 -->
			<view class="card-header">
				<view class="left">
					<!-- <text class="index">1</text> -->
					<text class="title">{{ item.gz.slice(0, 2) }}-{{ item.method === 'yinpanAPI' ? '时盘' : item.method ===
						'shanxiangAPI' ? '山向盘' : '' }} </text>
					<text class="datetime">{{ item.id }}</text>
				</view>
				<view class="right">
					<!-- <text class="icon-delete" @click="handleDelete">🗑</text> -->
					<span style="font-size: 24rpx;" v-if="item.method === 'shanxiangAPI'">{{ item.jushu }}</span>
				</view>
			</view>

			<!-- 内容 -->
			<view class="card-content">
				<view class="row">
					<view class="cell" style="width: 160rpx;">姓名: {{ item.xm }}</view>
					<view class="cell">性别: {{ item.xb }}</view>
					<view class="cell">方式: {{ item.mh }}</view>
				</view>
				<view class="row">
					<view class="cell" style="width: 240rpx;">类型: {{ item.qcnr }}</view>
					<view class="cell">时间: {{ item.nn }}/{{ item.yy }}/{{ item.rr }} {{ item.ss }}:{{ item.ss }}</view>
				</view>
			</view>

			<!-- <view v-for="(listItem, index) in item.list">
				<view class="valid" v-if="isValidJS(listItem.js)">{{ listItem.js }}</view>
			</view> -->
		</view>

	</view>

</template>

<script>
	import {
		getAIContentInfo,
		shanxiangAPI,
		yinpanAPI
	} from '@/api/user.js'
	import store from "@/store/index";
	export default {
		data() {
			return {
				keyword: '',
				filter: '全部',
				phone: uni.getStorageSync('vipShouJiNum'),
				AIContentInfoData: []
			}
		},
		created() {
			this.getAIContentInfoFun()
		},
		methods: {
			async getAIContentInfoFun() {
				const {
					data
				} = await getAIContentInfo(this.phone)
				this.AIContentInfoData = data.data
			},
			async arrangement(e) {
				console.log(78, e);
				if (e.method == 'shanxiangAPI') {
					const result = await shanxiangAPI(e.jushu, e.time, e.nm)
					store.commit(
						"setUploadData",
						Object.assign({}, store.state.uploadData, this.AllInformation, {
							method: "shanxiangAPI",
						})
					);
					store.commit("setQimenResponseData", result.data);
					uni.navigateTo({
						url: '/subPackages/paipan/pages/pan'
					})
				} else {
					const result = await yinpanAPI(e.nn + '-' + e.yy + '-' + e.rr, e.ss + ':' + e.ff + ':' + '00')
					store.commit(
						"setUploadData",
						Object.assign({}, store.state.uploadData, this.AllInformation, {
							method: "yinpanAPI"
						})
					);
					store.commit("setQimenResponseData", result.data);
					uni.navigateTo({
						url: '/subPackages/paipan/pages/pan'
					})
				}
				store.commit("setAIContentData", e.list);
			}
			// isValidJS(val) {
			// 	return val && val !== '""' && val.trim() !== '';
			// }
		}
	}
</script>

<style scoped>
	.container {
		background-color: #f6f6f6;
		min-height: 100vh;
	}

	.tabs {
		display: flex;
		justify-content: center;
		background-color: #fff;
		padding: 10px 0;
	}

	.tabs text {
		margin: 0 30rpx;
		font-size: 24rpx;
		color: #666;
	}

	.tabs .active {
		font-weight: bold;
		color: black;
	}

	.search-box {
		display: flex;
		padding: 20rpx;
		background-color: #fff;
	}

	.search-input {
		flex: 1;
		border: 1px solid #ddd;
		border-radius: 8rpx;
		padding: 10rpx;
		font-size: 24rpx;
		height: 44rpx;
	}

	.search-btn {
		width: 68px;
		height: 33px;
		line-height: 25px;
		margin-left: 10rpx;
		background-color: #f6b23c;
		color: white;
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
	}

	.filters {
		display: flex;
		background-color: #fff;
		padding: 20rpx 0;
		justify-content: space-around;
	}

	.filters text {
		font-size: 28rpx;
		color: #666;
	}

	.filters .selected {
		color: #f6b23c;
		font-weight: bold;
		border-bottom: 4rpx solid #f6b23c;
	}

	.record-card {
		background-color: #fff;
		margin: 20rpx;
		border-radius: 12rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}

	.card-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		border-bottom: 1px solid #f0f0f0;
	}

	.card-header .left {
		display: flex;
		align-items: center;
	}

	.card-header .index {
		background-color: #f0f0f0;
		padding: 4rpx 12rpx;
		border-radius: 20rpx;
		font-size: 26rpx;
		color: #333;
		margin-right: 10rpx;
	}

	.card-header .title {
		font-weight: bold;
		font-size: 28rpx;
		margin-right: 10rpx;
	}

	.card-header .datetime {
		color: #999;
		font-size: 26rpx;
	}

	.card-header .icon-delete {
		font-size: 32rpx;
		color: #999;
	}

	.card-content {}

	.row {
		display: flex;
	}

	.cell {
		font-size: 28rpx;
		color: #333;
		padding: 20rpx 30rpx;
	}

	.row:nth-child(1) .cell:nth-child(1) {
		border-right: 1px solid #ccc;
	}

	.row:nth-child(1) .cell:nth-child(2) {
		border-right: 1px solid #ccc;
	}

	.row:nth-child(2) .cell:nth-child(2) {
		border-left: 1px solid #ccc;
		border-top: 1px solid #ccc;
	}

	.row:nth-child(2) .cell:nth-child(1) {
		border-top: 1px solid #ccc;
	}

	.valid {
		font-size: 28rpx;
		padding: 0px 15px;
	}
</style>